<template>
	<view class="content">
		<view class="top">
			<view class="top-left" @tap="back">
				<image src="../../static/login/back.png"></image>
			</view>
			<view class="top-center">
				详情
			</view>
		</view>
		<view class="list1">
			<view class="title">图片</view>
			<view class="info">
				<image :src="cropFilePath" @tap="upload" class="meslist_img"></image>
				<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list" id="qianmin" @tap="showChange">
			<view class="title">签名</view>
			<view class="info">
				<text>{{userInfo.qianmin}}</text>
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list">
			<view class="title">注册</view>
			<view class="info">
				<text>{{userInfo.date}}</text>
			</view>
		</view>
		<view class="list" id="name" @tap="showChange">
			<view class="title">昵称</view>
			<view class="info">
				<text>{{userInfo.name}}</text>
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list">
			<view class="title">性别</view>
			<picker></picker>
			<picker class="info" @change="bindPickerChange" :value="sexIndex" :range="sexArray">
				<text>{{sexArray[sexIndex]}}</text>
			</picker>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list">
			<view class="title">生日</view>
			<picker class="info" mode="date" :value="userInfo.birth" :start="startDate" :end="endDate" @change="bindDateChange">
				<text class="uni-input">{{userInfo.birth}}</text>
			</picker>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list" id="phone" @tap="showChange">
			<view class="title">电话</view>
			<view class="info">
				<text>{{userInfo.phone}}</text>
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list" id="email" @tap="showChange">
			<view class="title">邮箱</view>
			<view class="info">
				<text>{{userInfo.email}}</text>
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<view class="list" id="psw" @tap="changePsw">
			<view class="title">密码</view>
			<view class="info">
				<input type="password" disabled="true" value="123456" />
			</view>
			<view class="change">
				<image src="../../static/login/change.png"></image>
			</view>
		</view>
		<button hover-class="click">退出登录</button>
		<view class="changePage" :animation='animationData' :style="{bottom:-height+'px'}">
			<view class="changeTop">
				<view class="left" @tap="showChange">取消</view>
				<view class="center">{{title}}</view>
				<view class="right" @tap="overChange">确定</view>
			</view>
			<textarea :class="changeType=='qianmin'?'changeInfo':'changeInfo1'" :placeholder="userInfo[changeType]=='未填'?'请输入你的'+title:userInfo[changeType]"
			 v-model="temp"></textarea>
		</view>
		<view class="changePage" :animation='animationData1' :style="{bottom:-height+'px'}">
			<view class="changeTop">
				<view class="left" @tap="changePsw">取消</view>
				<view class="center">密码</view>
				<view class="right" @tap="overChangePsw">确定</view>
			</view>
			<textarea class="changeInfo1" placeholder="请输入旧密码" v-model="pswOld"></textarea>
			<textarea class="changeInfo1" placeholder="请输入新密码" v-model="pswNew"></textarea>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/ling-imgcropper/ling-imgcropper.vue";
	import myfun from '../../common/myFunc.js'
	export default {
		data() {
			return {
				temp: '',
				pswOld: '',
				pswNew: '',
				changeType: '',
				userInfo: {
					imgurl: '',
					name: '',
					qianmin: '',
					phone: '',
					email: '',
					psw: '',
					sex: '',
					birth: '',
					date: ''
				},
				tempFilePath: '',
				cropFilePath: '',
				headimg: '',
				sexArray: ['男', '女', '未填'],
				sexIndex: 0,
				height: '',
				isShow: false,
				isShowPsw: false,
				animationData: '',
				animationData1: '',
				title: ''
			};
		},
		onLoad(e) {
			const res = uni.getSystemInfoSync()
			this.height = res.windowHeight
			uni.request({
				url: this.url + '/user/userDetail',
				method: 'POST',
				data: {
					id: e.id
				},
				success: (res) => {
					console.log(res)
					this.userInfo.imgurl = this.url + '/user/' + res.data.result.imgurl
					this.cropFilePath = this.url + '/user/' + res.data.result.imgurl
					this.userInfo.name = res.data.result.name
					this.userInfo.qianmin = res.data.result.explain ? res.data.result.explain : '这个人很懒，什么也没写(。>︿<)_θ'
					this.sexIndex = res.data.result.sex == '男' ? 0 : res.data.result.sex == '女' ? 1 : 2
					this.userInfo.email = res.data.result.email
					this.userInfo.date = myfun.dateFormate(res.data.result.register, 'yyyy-mm-dd')
					this.userInfo.phone = res.data.result.phone ? res.data.result.phone : '未填'
					this.userInfo.birth = res.data.result.birth ? res.data.result.birth : '未填'
				}
			})
		},
		components: {
			ImageCropper
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					animationType: 'pop-out'
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.sexIndex = e.target.value
				if (this.sexIndex == 1) {
					this.userInfo.sex = '女'
				} else if (this.sexIndex == 0) {
					this.userInfo.sex = '男'
				} else {
					this.userInfo.sex = "asexual"
				}
				// console.log(this.userInfo.sex)
			},
			bindDateChange: function(e) {
				this.userInfo.birth = e.target.value
				// console.log(this.date)
			},
			changePsw(e) {
				this.pswOld = ''
				this.pswNew = ''
				this.isShowPsw = !this.isShowPsw
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				if (this.isShowPsw) {
					animation.bottom(0).step()
				} else {
					animation.bottom(-this.height).step()
				}
				this.animationData1 = animation.export()
			},
			showChange(e) {
				this.temp = ''
				this.changeType = e.currentTarget.id
				switch (e.currentTarget.id) {
					case 'qianmin':
						this.title = '签名'
						break;
					case 'name':
						this.title = '昵称'
						break;
					case 'phone':
						this.title = '电话'
						break;
					case 'email':
						this.title = '邮箱'
						break;
					default:
						console.log('退出')
				}
				this.isShow = !this.isShow
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'ease',
				})
				if (this.isShow) {
					animation.bottom(0).step()
				} else {
					animation.bottom(-this.height).step()
				}
				this.animationData = animation.export()
			},
			overChange() {
				this.isShow = !this.isShow
				this.userInfo[this.changeType] = this.temp
				if (this.changeType == 'name') {
					uni.request({//判断是否重名
						url: this.url + "/signup/check",
						method: 'POST',
						data: {
							data: this.temp,
							type: 'name'
						},
						success: (res) => {
							if (res.data.is == 0) {
								uni.request({
									url: this.url + '/user/userUpdate',
									data: {
										id: uni.getStorageSync('user').id,
										type: this.changeType,
										data: this.temp
									},
									method: 'POST',
									success: (res) => {
										var animation = uni.createAnimation({
											duration: 400,
											timingFunction: 'ease',
										})
										if (this.isShow) {
											animation.bottom(0).step()
										} else {
											animation.bottom(-this.height).step()
										}
										this.animationData = animation.export()
										uni.showToast({
											title: '修改成功',
											icon: 'success',
											duration: 500
										})
									}
								})
							} else {
								uni.showToast({
									title: '该用户名已经存在',
									icon: 'none',
									duration: 500
								})
							}
						}
					})
				} else if (this.changeType == 'email') {
					uni.request({//判断邮箱是否重复
						url: this.url + "/signup/check",
						method: 'POST',
						data: {
							data: this.temp,
							type: 'email'
						},
						success: (res) => {
							if (res.data.is == 0) {
								uni.request({
									url: this.url + '/user/userUpdate',
									data: {
										id: uni.getStorageSync('user').id,
										type: this.changeType,
										data: this.temp
									},
									method: 'POST',
									success: (res) => {
										var animation = uni.createAnimation({
											duration: 400,
											timingFunction: 'ease',
										})
										if (this.isShow) {
											animation.bottom(0).step()
										} else {
											animation.bottom(-this.height).step()
										}
										this.animationData = animation.export()
										uni.showToast({
											title: '修改成功',
											icon: 'success',
											duration: 500
										})
									}
								})
							} else {
								uni.showToast({
									title: '该邮箱已经存在',
									icon: 'none',
									duration: 500
								})
							}
						}
					})
				} else {
					uni.request({
						url: this.url + '/user/userUpdate',
						data: {
							id: uni.getStorageSync('user').id,
							type: this.changeType,
							data: this.temp
						},
						method: 'POST',
						success: (res) => {
							var animation = uni.createAnimation({
								duration: 400,
								timingFunction: 'ease',
							})
							if (this.isShow) {
								animation.bottom(0).step()
							} else {
								animation.bottom(-this.height).step()
							}
							this.animationData = animation.export()
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 500
							})
						}
					})
				}
			},
			overChangePsw() {
				this.isShowPsw = !this.isShowPsw
				uni.request({
					url:this.url + '/user/userUpdate',
					method:'POST',
					data:{
						id: uni.getStorageSync('user').id,
						type: 'psw',
						data: this.pswNew,
						pwd: this.pswOld
					},
					success: (res) => {
						if(res.data.status == 400){
							uni.showToast({
								title: '密码错误',
								duration: 500
							})
						}else{
							var animation = uni.createAnimation({
									duration: 400,
									timingFunction: 'ease',
								})
								if (this.isShowPsw) {
									animation.bottom(0).step()
								} else {
									animation.bottom(-this.height).step()
								}
								this.animationData1 = animation.export()
								uni.showToast({
									title: '修改成功',
									icon: 'success',
									duration: 500
								})
							}
						}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 30;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			upload() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册或相机选择
					success: (res) => {
						this.tempFilePath = res.tempFilePaths.shift()
						console.log(this.tempFilePath)
					}
				});
			},
			confirm(e) {
				this.tempFilePath = '';
				this.cropFilePath = e.detail.tempFilePath;
				this.headimg = e.detail.tempFilePath;
				// #ifdef APP-PLUS||MP
				//除了H5端返回base64数据外，（APP-PLUS||MP就是APP和小程序就执行编译。）其他端都是返回临时地址，所以你要判断base64还是已上传文件名，
				//按我这里是先上传裁剪得来的临时文件地址然后得到已上传的文件名，
				//呆活你要判断是H5还是其他端传给后端类型参数让后端判断执行何种情况代码就OK了
				uni.uploadFile({
					url: '后端地址上传图片接口地址',
					filePath: this.headimg,
					name: 'file',
					fileType: 'image',
					//formData:{},传递参数
					success: (uploadFileRes) => {
						var backstr = uploadFileRes.data;
						//自定义操作
					},
					complete() {
						//console.log("this is headimg"+this.headimg)   
					},
					fail(e) {
						console.log("this is errormes " + e.message)
					}
				});
				// #endif
				// console.log("confirm:this.tempFilePath"+this.tempFilePath)
				// console.log("confirm:this.cropFilePath"+this.cropFilePath)
				// console.log("confirm:this.headimg"+this.headimg)
				// console.log(e)
			},
			cancel() {
				console.log('canceled');
				this.tempFilePath = "";
				this.cropFilePath = this.userInfo.imgurl;
			},
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.meslist_canvas {
		position: fixed;
		top: 0;
		width: 200px;
		height: 200px;
		visibility: hidden;
	}

	.top {
		.top-left {
			margin-left: $uni-spacing-col-base;
			height: 88rpx;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 48rpx;
			}
		}

		.top-center {
			position: absolute;
			margin-top: var(--status-bar-height);
			top: 16rpx;
			left: 336rpx;
			text-align: center;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 40rpx;
		}
	}

	.list1 {
		margin: 130rpx 30rpx 0;
		display: flex;
		flex-direction: row;
		width: 690rpx;
		font-size: 32rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

		.title,
		.info,
		.change {
			height: 148rpx;
			display: flex;
			align-items: center;
		}

		.title {
			font-weight: 600;
			width: 90rpx;
			justify-content: start;
		}

		.info {
			width: 540rpx;

			image {
				width: 104rpx;
				height: 104rpx;
				border-radius: 20rpx;
			}
		}

		.change {
			width: 60rpx;

			image {
				margin-left: 38rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.list:nth-child(5),
	.list:nth-child(8),
	.list:nth-child(10) {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.list {
		margin: 0 30rpx;
		display: flex;
		flex-direction: row;
		width: 690rpx;
		font-size: 32rpx;

		.title,
		.info,
		.change {
			height: 124rpx;
			display: flex;
			align-items: center;
		}

		.title {
			font-weight: 600;
			width: 90rpx;
			justify-content: start;
		}

		.info {
			width: 540rpx;
			color: rgba(39, 40, 50, 0.60);

			text {
				overflow: hidden; //溢出隐藏
				text-overflow: ellipsis; //文字溢出加省略号后缀
				white-space: nowrap //不换行
			}
		}

		.change {
			width: 60rpx;

			image {
				margin-left: 38rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	button {
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		margin: 60rpx 30rpx 50rpx;
		color: $uni-color-warning;
		border-radius: 10rpx;
		background-color: white;
	}

	.click {
		background-color: $uni-bg-color-grey;
	}

	.changePage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 11;
		background-color: white;

		.changeTop {
			padding-top: var(--status-bar-height);
			height: 88rpx;
			width: 100%;
			top: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 1);
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			font-size: 40rpx;
			font-weight: 600;

			.left,
			.right {
				margin: 0 $uni-spacing-col-base;
				font-size: 32rpx;
				font-weight: 400;
			}

			.right {
				color: #4AAAFF;
			}
		}

		.changeInfo {
			width: 642rpx;
			height: 370rpx;
			border-radius: 20rpx;
			background: #F3F4F6;
			margin: 34rpx 32rpx;
			padding: 16rpx 22rpx;
			color: #272832;
			font-size: 32rpx;
		}

		.changeInfo1 {
			width: 642rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 20rpx;
			background: #F3F4F6;
			margin: 34rpx 32rpx;
			padding: 16rpx 22rpx;
			color: #272832;
			font-size: 32rpx;
		}
	}
</style>
